<template>
	<view class="top">
		<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
			<uni-col :span="5">
				<view class="demo-uni-col dark">输入核销码:</view>
			</uni-col>
			<uni-col :span="14">
				<view class="demo-uni-col light">
					<uni-easyinput clearable focus v-model="value" placeholder="请输入核销码" @input="input" @blur="blur"
						@confirm="confirm">
					</uni-easyinput>
				</view>
			</uni-col>
			<uni-col :span="5">
				<button class="demo-uni-col darked" @click="search">识别</button>
			</uni-col>
		</uni-row>
		<view class="cards" v-if="isShow">
			<uni-card class="card" title="核销码MC-1234-5678-9012">
				<view class="service">
					<view class="title">服务内容</view>
					<view>XXX标准洗车服务包含</view>
					<view>整车泡沫冲洗擦干</view>
					<view>轮胎轮毂冲洗清洁</view>
					<view>车内吸尘</view>
					<view>内饰脚垫简单除尘</view>
					<view>（不包含虫尸、水泥、沥青和顽固污渍清理等)</view>
				</view>
				<view class="order">
					<view class="orderTitle">订单信息</view>
					<view class="info">
						<view>订单价格：</view>
						<view>￥30.00</view>
					</view>
					<view class="info">
						<view>实付金额：</view>
						<view>￥25.00</view>
					</view>
					<view class="info">
						<view>优惠金额：</view>
						<view>￥5.00</view>
					</view>
					<view class="info">
						<view>订单编号：</view>
						<view>2020032554565799</view>
					</view>
					<view class="info">
						<view>支付时间：</view>
						<view>2020.03.30 14:40:45</view>
					</view>
					<view class="info">
						<view>预约时间：</view>
						<view> 2020.03.30 14:40 </view>
					</view>
				</view>
			</uni-card>
			<button class="button" @click="toggle"
				:style="{ backgroundColor: isVerified ? 'rgba(154,154,154,1)' : 'rgba(13,122,247,1)'}"><text
					class="button-text">{{ isVerified ? '已核销' : '确认核销' }} </text></button>
			<yfx-tooltip ref="tooltip"></yfx-tooltip>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				gutter: 0,
				nvueWidth: 730,
				isShow: false,
				isVerified: false,
			}
		},
		methods: {
			//点击搜索或者确定
			confirm(e) {
				console.log('confirm搜索内容：' + e)
			},
			//blur事件
			blur(e) {
				console.log('blur搜索内容：' + e)
			},
			//inut事件
			input(e) {
				console.log('input搜索内容：' + e)
			},
			search(e) {
				this.value = "MC—1234-5678-9012"
				this.isShow = true
				console.log('search搜索内容：' + e)
			},
			//显示弹窗
			toggle() {
				this.$refs.tooltip.open({
					msg: "核销此订单",
					content: "请您仔细核对订单，此操作不可撤销，请谨慎操作",
					confirm: () => {
						console.log("点击确认按钮触发")
						this.isVerified = true; // 更新状态  
					},
					cancel: () => {
						console.log("点击取消按钮触发")
					}
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.top {
		width: 720rpx;
		height: 100rpx;
		margin: 20rpx;
	}

	.demo-uni-row {
		margin: 20rpx auto;
		/* QQ、抖音小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 20rpx;
	}

	/* #endif */

	.demo-uni-col {
		height: 60rpx;
		border-radius: 8rpx;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		text-align: left;
		line-height: 66rpx;
		font-size: 28rpx;
	}

	.darked {
		background-color: rgba(29, 111, 255, 1);
		line-height: 60rpx;
		text-align: center;
		margin-left: 20rpx;
		color: rgba(255, 255, 255, 1);
	}

	.light {
		
		margin-left: 15rpx;
	}
	.cards{
		margin-top: 70rpx;
	}

	.card {
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
	}

	.service {
		margin-top: 10rpx;
		text-align: left;
		width: 588rpx;
		height: 340rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: rgb(16, 16, 16);
		border-bottom: 1px solid rgba(140, 139, 139, 0.14);
	}

	.service>.title {
		font-weight: bold;
	}

	.order {
		width: 400rpx;
		height: 350rpx;
		margin-top: 50rpx;
		text-align: left;
		font-size: 28rpx;
		color: rgb(16, 16, 16);
		line-height: 40rpx;

	}

	.orderTitle {
		font-weight: bold;
	}

	.info {
		display: flex;
	}

	.button {
		width: 524rpx;
		height: 80rpx;
		border-radius: 32rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgba(13, 122, 247, 1);
		color: rgba(255, 255, 255, 1);
		margin-top: 50rpx;
	}
</style>